<template>
  <div>
    <transition name="slide">
      <div v-if="visible" :class="{reverse}">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'zSlidesItem',
  data () {
    return {
      selected: null,
      reverse: false
    }
  },
  mounted () {
  },
  props: {
    name: {
      type: String,
      required: true
    }
  },
  computed: {
    visible () {
      return String(this.selected) === this.name
    }
  }
}
</script>

<style lang="scss" scoped>
  .slide-leave-active {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .slide-enter-active, .slide-leave-active {
    transition: all 0.5s;
  }
  .slide-enter {
    transform: translateX(100%);
  }
  .slide-enter.reverse {
    transform: translateX(-100%);
  }
  .slide-leave-to {
    transform: translateX(-100%);
  }
  .slide-leave-to.reverse {
    transform: translateX(100%);
  }
</style>
